<template>
  <view v-if="open">
    <u-navbar
      :placeholder="true"
      :titleStyle="{ color: '#ffffff' }"
      leftIconColor="#ffffff"
      bgColor="#3775cb"
      :autoBack="true"
    >
      <template #right>
        <view @click="submitForm">
          <up-text color="#ffffff" text="提交"></up-text>
        </view>
      </template>
    </u-navbar>

    <view
      style="
        margin: 25rpx;
        background-color: #ffffff;
        padding: 15rpx 15rpx 15rpx 15rpx;
        border-radius: 15rpx;
      "
    >
      <view>
        <u--textarea
          v-model="formData.title"
          border="bottom"
          height="20"
          placeholder="标题"
        ></u--textarea>
      </view>

      <view>
        <editor
          style="height: 65vh; padding: 20rpx"
          id="editor"
          placeholder="请输入内容"
          class="ql-container"
          @ready="onEditorReady"
        ></editor>
      </view>
      <view
        v-if="!customerId"
        @click="openSelectCus"
        style="padding: 20rpx 30rpx; background-color: #f7f7f7; margin: 15rpx 0"
      >
        <text style="padding-top: 14rpx; font-size: 26rpx; width: 450rpx">
          选择客户{{ formData!.customerLabel ? '：' + formData!.customerLabel : '' }}
        </text>
      </view>
      <CusPicker
        v-model:labels="formData!.customerLabel"
        v-model="formData!.customerId"
        ref="cusPicker"
      />
      <view>
        <u-cell-group>
          <u-cell
            :isLink="true"
            :title="formData.followWayId ? '跟进方式 ' + formData?.followWayLabel : '跟进方式'"
            @click="
              () => {
                show = true
              }
            "
          ></u-cell>
        </u-cell-group>
        <u-popup :show="show" @close="show = false">
          <view style="padding: 20rpx">
            <u-radio-group v-model="formData.followWayId" iconPlacement="right" placement="column">
              <u-radio
                :customStyle="{ marginBottom: '8px' }"
                v-for="(item, index) in followWayList"
                :key="index"
                :label="item.label"
                :name="item.followWayId"
                @change="changeFollowWay"
              >
              </u-radio>
            </u-radio-group>
          </view>
        </u-popup>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import CusPicker from '@/components/customer/cus-picker.vue'
import {
  getFollowRecordAPI,
  postFollowRecordAPI,
  putFollowRecordAPI,
} from '@/services/followRecord'
import { getFollowWayListAPI } from '@/services/common'
// 接收页面参数
const query = defineProps<{
  fromPage: string
  customerId: string | number
  followRecordId: string
}>()
const open = ref(false)
const show = ref(false)
const formData = ref<any>({
  followRecordId: undefined,
  userId: undefined,
  customerId: undefined,
  title: undefined,
  recordContent: undefined,
  attachments: undefined,
  followWayId: undefined,
  followTime: undefined,
  followRemind: 'true',
  status: '1',
  intervalDays: 1,
  repeatTimes: 1,
})

const editorCtx = ref<any>()

const cusPicker = ref<InstanceType<typeof CusPicker>>()

const followWayList = ref<any[]>()

const submitForm = async (e) => {
  editorCtx.value!.getContents({
    success: function (res) {
      formData.value.recordContent = res.html
    },
  })
  if (formData.value.followRecordId) {
    const res = await putFollowRecordAPI(formData.value)
  } else {
    const res = await postFollowRecordAPI(formData.value)
  }
  navigateBack()
}

const navigateBack = async () => {
  if (query.fromPage) {
    let pages = getCurrentPages()
    let page: any = pages[pages.length - 2]
    page.$vm.$.exposed.refreshFollowRecordList({
      followRecordId: query.followRecordId,
    })
  }
  uni.navigateBack({
    delta: 1,
  })
}

const openSelectCus = async () => {
  cusPicker.value!.open()
}

const onEditorReady = async () => {
  if (query.followRecordId) {
    await getFollowRecord()
  }
  if (query.customerId) {
    formData.value.customerId = query.customerId
  }
  uni
    .createSelectorQuery()
    .select('#editor')
    .context((res) => {
      editorCtx.value = res!.context
      editorCtx.value!.setContents({
        html: formData.value?.recordContent ? formData.value?.recordContent : '',
      })
    })
    .exec()
}

const getFollowRecord = async () => {
  let res = await getFollowRecordAPI(query.followRecordId)
  formData.value = res.data
}

const getFollowWayList = async () => {
  let res = await getFollowWayListAPI()
  followWayList.value = res.data
}

const changeFollowWay = async (e: any) => {
  for (const i in followWayList.value) {
    if (followWayList.value[i].followWayId === e) {
      formData.value.followWayLabel = followWayList.value[i].label
    }
  }
  show.value = false
}

// 组件挂载完毕
onMounted(() => {
  open.value = true
  getFollowWayList()
})
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
}
</style>
